<template>
	<div class="app-container" v-loading="loading">
		<div class="search-container  app_ny">
			<div class="div2" style="position: relative">
				<el-row :gutter="12" style="width: 100%">
					<el-col :span="3">
						<el-input v-model="queryParams.keyword"
								  placeholder="请输入关键词"
								  clearable
								  @keyup.enter="handleQuery" />
					</el-col>
					<el-col :span="3">
						<el-select
						     v-model="queryParams.status"
						     placeholder="请选择审核状态"
							 clearable>
						     <el-option label="待审核" value="0"/>
							 <el-option label="已通过" value="1"/>
							 <el-option label="已驳回" value="2"/>
						   </el-select>
					</el-col>
					<el-col :span="6" >
						<el-button  :loading="loading"  type="primary" @click="handleQuery"><template
							#icon><i-ep-search /></template>查询</el-button>
					</el-col>
				</el-row>
				<FilterColumn
				 class="filtBox"
				 @handleRefresh="resetQuery()"
				:strtype="strtype"></FilterColumn>
			</div>	
		</div>
		
		
		<el-card shadow="never">
			
			<div class="action-row">
				<el-button  @click="handleDo('', 'act_info')" :disabled="multipleSelection.length !== 1" :type="buttonType(multipleSelection.length)" plain><template #icon><i-ep-document/></template>详情</el-button>
				<el-button  v-hasPerm="['EngineeringInvoiceCheck']" @click="handleDo('', 'act_check')" :disabled="multipleSelection.length !== 1 || multipleSelection[0]?.status != 0" :type="buttonType(multipleSelection.length)" plain><template #icon><i-ep-star/></template>审核</el-button>
			</div>
		
			<el-table ref="dataTableRef" 
				v-loading="loading" 
				:data="tableData"
				align="left" 
				tooltip-effect="dark"
				:show-overflow-tooltip="true"
				:scrollbar-always-on="true"
				border 
				@cell-mouse-enter="rowMouse" 
				@cell-mouse-leave="menuLineVisible=false"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" align="center" width="55" />
				<el-table-column type="index" label="序号" align="center" width="80" />
				<template v-for="(item,index) in cColumnsList()" :key='index'>
					<el-table-column 
						:label="item.label" 
						:align="item.align" 
						:prop="item.prop" 
						:width="item.width"
						:min-width="item.minwidth"
						:fixed="item.fixed"
						>
						<template #default="scope" v-if="item.prop == 'invoice[0].invoice_type'">
							<span v-if="scope.row.invoice[0].invoice_type == 1">专票</span>
							<span v-if="scope.row.invoice[0].invoice_type == 2">普票</span>
						</template>
						<template #default="scope"  v-if="item.prop == 'status'">
							<el-tag  :type="titModel[scope.row.status].type">{{titModel[scope.row.status].title}}</el-tag>
						</template>
						
					</el-table-column>
				</template>
				
			</el-table>
			<pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.page"
				v-model:limit="queryParams.limit" @pagination="handleQuery" />
		</el-card>


	<el-dialog 
		:title="formText" 
		v-model="dialogVisible" lock-scroll
		width="1000px"
		:close-on-click-modal="false" 
		:close-on-press-escape="false" class="list-info">
		
		<div v-if="['act_check'].includes(dialogStatus)">
			<el-form ref="dataFormRef" :model="formTemp" :rules="formRules" label-position="right"
				label-width="190px">
				
				<el-form-item  label="处理结果" >
					<el-input
					   v-model="formTemp.mark"
					   :rows="6"
					   type="textarea"
					   placeholder="请输入处理结果"
					 />
				</el-form-item>	
			</el-form>
		</div>
		
		<div v-if="dialogStatus === 'act_info'">
			<el-descriptions size="default" :column="1" border>
				<el-descriptions-item label-class-name="labelC1"
					label="所属公司：">{{formTemp.invoice[0].company_info?.name}}</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="部门领导/子公司法人：">{{formTemp.invoice[0].leader_user?.name}}</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="开票单位：">{{formTemp.invoice[0].company}}</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="摘要：">{{formTemp.invoice[0].abstract}}</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="发票号码：">{{formTemp.invoice[0].invoice_no}}</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="发票种类：">
					<span v-if="formTemp.invoice[0].invoice_type == 1">专票</span>
					<span v-if="formTemp.invoice[0].invoice_type == 2">普票</span>
				</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="附件张数：">{{formTemp.invoice[0].annex}}</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
					label="金额：">{{formTemp.invoice[0].amount}}</el-descriptions-item>
					<el-descriptions-item label-class-name="labelC1"
						label="申请人：">{{formTemp.invoice[0].user?.name}}</el-descriptions-item>
					<el-descriptions-item label-class-name="labelC1"
						label="申请时间：">
						{{formTemp.add_time_text}}
					</el-descriptions-item>
				<el-descriptions-item label-class-name="labelC1"
						label="审核状态：">
					<el-tag v-if="formTemp.status == 0" type="info">待审核</el-tag>
					<el-tag v-if="formTemp.status == 1" type="success">已通过</el-tag>
					<el-tag v-if="formTemp.status == 2" type="danger">已驳回</el-tag>
					<el-tag style="margin-left: 5px;" v-if="formTemp.status == 2 ||formTemp.status == 1 " >{{formTemp.check_time_text}}</el-tag>
				</el-descriptions-item>
			</el-descriptions>
			
			<template v-if="formTemp.rule?.length>0">
				<el-divider content-position="left">审批日志</el-divider>
				<el-row>
					<div class="uTCont" v-for="uItem in formTemp?.rule" style="width: 100%;">
						<h4 class="uThead">{{uItem.name}}</h4>
						<el-table border  :data="uItem.user_info" style="width: 100%">
						<el-table-column label="审批人" width="200">
							<template #default="scope">
								<div class="uhead">
									<el-avatar :size="40" :src="scope.row.avatar" ></el-avatar>
									<span class="uheadN">{{scope.row.name}}</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="审核状态" align="center" width="150">
							<template #default="scope">
								<el-tag v-if="scope.row.status == 0" type="info">待审核</el-tag>
								<el-tag v-if="scope.row.status == 1" type="success">已通过</el-tag>
								<el-tag v-if="scope.row.status == 2" type="danger">已驳回</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="操作日期" width="220">
							<template #default="scope">
								<el-icon> <el-icon-timer></el-icon-timer></el-icon>
								<span style="margin-left: 10px">{{ scope.row.check_time }}</span>
							</template>
						</el-table-column>
						<el-table-column label="备注">
							<template #default="scope">
								{{ scope.row.mark }}
							</template>
						</el-table-column>
					</el-table> 
					</div>
				</el-row>
			</template>
		</div>
		<template #footer>
			<div class="dialog-footer">
		
				<el-button type="primary" v-if="['act_check'].includes(dialogStatus)"  @click="doData('act_doend')">通 过</el-button>
				<el-button type="primary" v-if="['act_check'].includes(dialogStatus)"  @click="doData('act_doback')">退 回</el-button>
				<el-button @click="dialogVisible = false">关闭</el-button>
			</div>
		</template>
	</el-dialog>


	
		
		
		
		

	</div>
</template>
<script setup lang="ts">
	import { useRoute } from 'vue-router';
	import _ from 'lodash-es'
	import { useUserStore } from "@/store/modules/user";
	import { useTableFilterStore } from "@/store/modules/tableFilter";
	import {
		engineeringInvoiceCheckList,
		engineeringInvoiceCheckAdd
	} from "@/api/engine";
	
	
	
	const TableFilter = useTableFilterStore();
	const userStore = useUserStore();
	const strtype = ref('engineInvoiceCheck'); //数据
	
	// 表格标题
		const cTitles = ["所属公司","部门领导/子公司法人", "开票单位", "摘要",'发票号码',"发票种类","附件张数","金额(元)","申请时间",'审核状态'];
		// 显示字段
		const sTitles = ["所属公司",'发票号码', "开票单位","发票种类","金额(元)","申请时间",'审核状态'];
		// 字段属性	
		const cColumns =[
			{ label: "所属公司", prop: "invoice[0].company_info.name", align: "center", minwidth: 200 },
			{ label: "部门领导/子公司法人", prop: "invoice[0].leader_user.name", align: "center", minwidth: 200 },
			{ label: "开票单位", prop: "invoice[0].company", align: "center", minwidth: 200 },
			{ label: "摘要", prop: "invoice[0].abstract", align: "center", minwidth: 150 },
			{ label: "发票号码", prop: "invoice[0].invoice_no", align: "center", minwidth: 150 },
			{ label: "发票种类", prop: "invoice[0].invoice_type", align: "center", minwidth: 120 },
			{ label: "附件张数", prop: "invoice[0].annex", align: "center", minwidth: 150 },
			{ label: "金额(元)", prop: "invoice[0].amount", align: "center", minwidth: 150 },
			{ label: "申请时间", prop: "add_time_text", align: "center", minwidth: 180 },
			{ label: "审核状态", prop: "status", align: "center", width: 150 }
		]	
		interface TableGlobalLocal {
		  [key: string]: any; // 或者更具体的类型
		}
		// 列表渲染
		function cColumnsList(){
			const ColumnsList = (TableFilter.tableGlobalLocal as TableGlobalLocal)[strtype.value + '_checklist'];
			if(ColumnsList)
			{
				const columnMap:any = {}; // 创建一个对象来存储cColumns中label和对象的映射  
				// 预先建立label到对象的映射  
				for (const column of cColumns) {  
					columnMap[column.label] = column;  
				}  
				const newList = [];  
				for (const label of ColumnsList) {  
					// 尝试从映射中获取对象  
					const foundColumn = columnMap[label];  
					if (foundColumn) {  
						// 如果找到了，则添加到newList中  
						newList.push(foundColumn);  
					}  
				}  
				return newList;  
			}
			else
			{
					return [];
			}
		};
		// 列表-数据列初始化
		function columnsInit() {
		  const dropColStr:string =strtype.value + '_dropCol';
		  const checklistStr:string = strtype.value + '_checklist';
		  const drop_col:any = (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[dropColStr];
		  const checklist = (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[checklistStr]; 
		  if(!drop_col)
		  {
			  (TableFilter.tableGlobalLocal as TableGlobalLocal)[dropColStr]=JSON.parse(JSON.stringify(cTitles));
			  (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[dropColStr]=JSON.parse(JSON.stringify(cTitles));
		  }
		  if(!checklist)
		  {
			  (TableFilter.tableGlobalLocal as TableGlobalLocal)[checklistStr]=JSON.parse(JSON.stringify(sTitles)) ;
			  (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[checklistStr]=JSON.parse(JSON.stringify(sTitles));
		  }
		}
	
	
	
	
	// 表单模型
	const cForm = {
		id:undefined,//企业融资记录id
		status:"",//状态 1通过 2驳回
		mark:""//审批说明
	}
	// 验证规则
	const cRules = {
		did: [{required: true,message: '请选择所属部门',trigger: 'change'}],
		leader_uid: [{required: true,message: '请选择部门领导/子公司法人',trigger: 'change'}],
		fz_uid: [{required: true,message: '请选择子公司副总',trigger: 'change'}],
		company: [{required: true,message: '请输入收款人姓名/公司名称',trigger: 'blur'}],
		account: [{required: true,message: '请输入账号',trigger: 'blur'}],
		bank: [{required: true,message: '请输入开户银行',trigger: 'blur'}],
		content: [{required: true,message: '请输入收款人姓名/公司名称',trigger: 'blur'}],
		contract_amount: [{required: true,message: '请输入申请事由',trigger: 'blur'}],
		paid_amount: [{required: true,message: '请输入合同/审定金额',trigger: 'blur'}],
		apply_amount: [{required: true,message: '请输入已付金额',trigger: 'blur'}],
		approved_amount: [{required: true,message: '请输入批准金额',trigger: 'blur'}],
		// rule: [{required: true,message: '请输入收款人姓名/公司名称',trigger: 'blur'}],
	}
	const dataFormRef = ref(ElForm);
	// 数据的data-ref
	const queryFormRef = ref(ElForm);
	/*** 搜索窗-字段表 */
	const queryParams = reactive({
		page: 1,
		limit: 20,
		keyword:"",
		status:""
	});

	const dialogVisible = ref(false);//表格
	const loading = ref(true);
	const total = ref(0);
	const tableData = ref<any>();
	const multipleSelection =ref<any>([]);
	const menuLineVisible =ref(true);
	const rowR = ref<any>({});
	const dialogStatus = ref<string>(""); // 操作行为 formText
	const formText =ref<string>(""); // 操作窗口标题
	const formTemp = ref<any>(cForm);
	//验证规则
	const formRules = ref<any>(cRules);
	const titModel=ref([{
	    title:'待审核',
	    type:'info'
	  },{
	    title:'已通过',
	    type:'success'
	  },{
	    title:'已驳回',
	    type:'danger'
	  }])
	  
	// 行菜单事件
	function rowMouse(row:any) {
		menuLineVisible.value = true
		rowR.value = row
	}
	// 数据多选事件
	function handleSelectionChange(val:any) {
		multipleSelection.value = val
	}
	// 初始表单数据
	function resetTemp() {
		formTemp.value = JSON.parse(JSON.stringify(cForm));
		resetForm();
	}
	// 表单重置
	function resetForm() {
		dataFormRef.value.resetFields()
	}
	// 重置搜索内容
	function resetQuery() {
		handleQuery();
	}
	// 操作
	 function handleDo(row:any, act:string) {
		dialogStatus.value = act
		switch (act) {
			case 'act_add':
				break
			case 'act_check':
				dialogVisible.value = true
				formText.value = '审核'
				formTemp.value = JSON.parse(JSON.stringify(row || multipleSelection.value[0]));
				break
			default:
				dialogVisible.value = true
				formText.value = '查看详情'
				formTemp.value = JSON.parse(JSON.stringify(row || multipleSelection.value[0]));
		}
	}
	// 提交数据
	function doData(act:string) {
		
		let dostatus = 0;
		switch (act) {
		  case 'act_doend':
			dostatus= 1
		    break
		  case 'act_doback':
			dostatus= 2
		    break
		  default:
			ElMessage.error('无效操作')
			return false;
		}
		if (['act_doend', 'act_doback'].includes(act)){
			// 退回
			var data = {
				mark:formTemp.value.mark,
				status:dostatus,
				id:formTemp.value.id
			}
			engineeringInvoiceCheckAdd(data).then((res) => {
				ElMessage({ message:'操作成功', type: 'success' })
				dialogVisible.value = false;
				handleQuery();
			}).finally(() => {})
		}
		
	}
	  
	  
	// 初始化搜索内容
	function handleQuery() {
		getList();
	}  
	  
	// 获取列表的数据
	function getList(type:string='') {
		loading.value = true
		if (type === 'search') {
			queryParams.page = 1
		}
		engineeringInvoiceCheckList(queryParams).then((res) => {
			tableData.value = res.data.list
			total.value = res.data.count
		}).finally(() => {
			loading.value = false;
		})
	}
	
	// 操作按钮样式
	function buttonType(val) {
		if (val === 1) {
			return 'primary'
		} else {
			return 'info'
		}
	}
	
	
	onMounted(() => {
		handleQuery();
		columnsInit();
	});
</script>

<style lang="scss" scoped>

</style>